<template>
  <div class="container" style="width:100%">
    <el-container>
      <el-header>
        <div style="width: 100%">
          <navigator></navigator>
        </div>
      </el-header>
      <el-container>
        <el-aside width="120px">
          <el-menu>
            <el-menu-item @click="elMainType = '初始界面'">
              <template #title><i class="el-icon-s-order"></i>条件单</template>
            </el-menu-item>
            <el-menu-item @click="showReportList">
              <template #title><i class="el-icon-data-analysis"></i>回测报告</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-container>
            <el-aside width="300px">
              <el-row gutter="10">
                <el-col style="width: 200px" span="1">
                  <el-input
                    size="mini"
                  >
                    <template #append>
                      <el-button size="mini" icon="el-icon-search"></el-button>
                    </template>
                  </el-input>
                </el-col>
                <el-col span="4">
                  <el-dropdown split-button type="mini" trigger="click" @click="startCreateSheet">
                    新建
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>导入</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-col>
              </el-row>
              <el-card shadow="never">
                <el-row><h5 align="left">当前条件单</h5></el-row>
                <el-scrollbar height="100px">
                  <el-row>
                    <el-menu style="width: 300px">
                      <div v-for="(sheet,index) in openingSheets" :key="sheet.conditionSheetId">
                        <el-row type="flex" align="middle">
                          <el-col span="4">
                            <el-menu-item align="left" style="width: 200px" @click="openSheet(sheet)">
                              {{ sheet.conditionSheetName }}
                            </el-menu-item>
                          </el-col>
                          <el-col span="2">
                            <el-button type="text" icon="el-icon-close" @click="closeSheet(index)"></el-button>
                          </el-col>
                        </el-row>
                      </div>
                    </el-menu>
                  </el-row>
                </el-scrollbar>
              </el-card>
              <el-card>
                <el-row style="width: 150px">
                  <el-select v-model="selectedSheetType" placeholder="请选择" size="mini">
                    <el-option label="所有条件单" value="所有条件单" @click="siftSheet"></el-option>
                    <el-option label="已上架条件单" value="已上架条件单" @click="siftSheet"></el-option>
                    <el-option label="未上架条件单" value="未上架条件单" @click="siftSheet"></el-option>
                    <el-option label="审核中条件单" value="审核中条件单" @click="siftSheet"></el-option>
                  </el-select>
                </el-row>
                <el-scrollbar height="300px">
                  <el-row>
                    <el-menu style="width: 300px">
                      <div v-for="(sheet,index) in displayingSheets" :key="sheet.conditionSheetId">
                        <el-row type="flex" align="middle">
                          <el-col span="4">
                            <el-menu-item align="left" style="width: 200px" @click="openSheet(sheet)">
                              {{ sheet.conditionSheetName }}
                            </el-menu-item>
                          </el-col>
                          <el-col span="2">
                            <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                              <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                              <template #dropdown>
                                <el-dropdown-menu>
                                  <el-dropdown-item>下载</el-dropdown-item>
                                  <el-dropdown-item @click="deleteSheet(index)">删除</el-dropdown-item>
                                </el-dropdown-menu>
                              </template>
                            </el-dropdown>
                          </el-col>
                        </el-row>
                      </div>
                    </el-menu>
                  </el-row>
                </el-scrollbar>
              </el-card>
            </el-aside>
            <el-main>
              <div v-if="elMainType==='初始界面'" align="middle">
                <font size="10" color="#00008b">开始使用智能条件单</font>
                <p></p>
                <el-button type="primary" @click="startCreateSheet">创建新条件单</el-button>
              </div>
              <div v-if="elMainType==='条件单详情'">
                <el-dialog title="回测" v-model="backtestVisable">
                  <el-form :model="backtestForm">
                    <el-form-item label="股票" :label-width="backtestFormLabelWidth">
                      <el-select v-model="backtestForm.stock" placeholder="请选择股票">
                        <el-option v-for="stock in stockList" v-bind:key="stock.stockCode" :label="stock.stockName"
                                   :value="stock.stockCode"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="起止日期" :label-width="backtestFormLabelWidth">
                      <el-date-picker
                        value-format="YYYY-MM-DD hh:mm:ss"
                        v-model="backtestForm.time"
                        type="datetimerange"
                        :shortcuts="shortcuts"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="backtestVisable = false">取 消</el-button>
                      <el-button type="primary" @click="backtest">确 定</el-button>
                    </span>
                  </template>
                </el-dialog>
                <el-dialog title="上架" v-model="applyForShelfVisable">
                  <el-form :model="shelfForm">
                    <el-form-item label="商品名称">
                      <el-input v-model="shelfForm.commodityName"></el-input>
                    </el-form-item>
                    <el-form-item label="商品描述">
                      <el-input type="textarea" v-model="shelfForm.commodityDescription"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格">
                      <el-input v-model="shelfForm.commodityPrice"></el-input>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="applyForShelfVisable = false">取 消</el-button>
                      <el-button type="primary" @click="applyforShelf">确 定</el-button>
                    </span>
                  </template>
                </el-dialog>
                <el-container>
                  <el-header>
                    <el-card style="width: 95%; margin:0 auto ">
                      <el-row type="flex" align="middle">
                        <el-col span="4">
                          <el-input v-model="openingSheetName" :disabled="!changingSheetName"
                                    @keyup.enter="changeSheetName"></el-input>
                        </el-col>
                        <el-col span="1" :offset="1">
                          <el-button size="small" type="text" icon="el-icon-edit"
                                     @click="startChangingSheetName"></el-button>
                        </el-col>
                        <el-col span="1" :offset="13">
                          <el-button size="small" type="primary" @click="backtestVisable=true">回测</el-button>
                        </el-col>
                        <el-col span="1" :offset="1">
                          <el-button size="small" type="primary" @click="applyForShelfVisable=true">上架</el-button>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-header>
                  <el-main>
                    <el-card style="width: 95%; margin:0 auto; height: 500px;margin-top: 50px ">
                      <el-radio-group v-model="selectedOrderType" size="mini">
                        <el-radio-button label="买入"></el-radio-button>
                        <el-radio-button label="卖出"></el-radio-button>
                      </el-radio-group>
                      <el-table
                        :data="conditions.filter(condition=>{return condition.orderType===selectedOrderType&&condition.conditionName!=='仓位'})"
                        style="width: 100%">
                        <el-table-column
                          prop="conditionName"
                          label="条件名">
                        </el-table-column>
                        <el-table-column
                          prop="conditionParameter"
                          label="参数">
                        </el-table-column>
                      </el-table>
                      <div v-if="selectedOrderType==='买入'">
                        使用总资金的{{ buyPercent }}%买入股票
                      </div>
                      <div v-if="selectedOrderType==='卖出'">
                        卖出价值为总资金{{ sellPercent }}%的股票
                      </div>
                    </el-card>
                  </el-main>
                </el-container>
              </div>
              <div v-if="elMainType === '新建条件单'">
                <el-container>
                  <el-header>
                    <el-card style="width: 95%; margin:0 auto ">
                      <el-row type="flex" align="middle">
                        <el-col span="4">
                          <el-input v-model="openingSheetName" :disabled="!changingSheetName"
                                    @keyup.enter="changeSheetName"></el-input>
                        </el-col>
                        <el-col span="1" :offset="1">
                          <el-button size="small" type="text" icon="el-icon-edit"
                                     @click="startChangingSheetName"></el-button>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-header>
                  <el-main style="width: 95%; margin:0 auto ">
                    <el-row>
                      <el-col span="4">
                        <el-card style="width: 580px; height: 500px;margin-top: 50px ">
                          <el-radio-group v-model="selectedOrderType" size="mini">
                            <el-radio-button label="买入"></el-radio-button>
                            <el-radio-button label="卖出"></el-radio-button>
                          </el-radio-group>
                          <div v-for="condition in conditions.slice(0,2)" :key="condition.conditionId">
                            <el-row type="flex" align="middle" v-if="condition.orderType===selectedOrderType">
                              {{ condition.conditionName }}
                              <el-input size="mini" v-model="condition.conditionParameter"
                                        style="width: 50px; margin-left:120px"></el-input>
                              %
                            </el-row>
                          </div>
                          <el-scrollbar>
                            <el-menu>
                              <div v-for="(condition,index) in conditions.slice(2)" :key="condition.conditionId">
                                <el-row type="flex" align="middle" v-if="condition.orderType===selectedOrderType">
                                  <el-col span="1">
                                    <el-menu-item align="left" style="width: 150px">
                                      {{ condition.conditionName }}
                                    </el-menu-item>
                                  </el-col>
                                  <el-col span="1">
                                    <el-input size="mini" v-model="condition.conditionParameter"
                                              style="width: 50px"></el-input>
                                  </el-col>
                                  <el-col span="1" :offset="1">
                                    <el-button icon="el-icon-circle-close" type="text"
                                               @click="deleteCondition(index)"></el-button>
                                  </el-col>
                                </el-row>
                              </div>
                            </el-menu>
                          </el-scrollbar>
                        </el-card>
                      </el-col>
                      <el-col span="4" :offset="1">
                        <el-card style="width: 380px; height: 500px;margin-top: 50px ">
                          <el-scrollbar>
                            <el-menu style="width: 415px">
                              <div v-for="condition in listConditions" :key="condition.conditionId">
                                <el-row type="flex" align="middle">
                                  <el-col span="4">
                                    <el-menu-item align="left" style="width: 300px">
                                      {{ condition.conditionName }}
                                    </el-menu-item>
                                  </el-col>
                                  <el-col span="2">
                                    <el-button icon="el-icon-circle-plus" type="text"
                                               @click="addCondition(condition)"></el-button>
                                  </el-col>
                                </el-row>
                              </div>
                            </el-menu>
                          </el-scrollbar>
                        </el-card>
                      </el-col>
                    </el-row>
                    <el-button type="primary" @click="createSheet">确认创建</el-button>
                  </el-main>
                </el-container>
              </div>
              <div v-if="elMainType==='回测图表展示'">
                <el-container>
                  <el-header>
                    <el-card style="width: 95%; margin:0 auto ">
                      <el-row type="flex" align="middle">
                        <el-col span="4">
                          <el-input v-model="openingSheetName" :disabled="!changingSheetName"
                                    @keyup.enter="changeSheetName"></el-input>
                        </el-col>
                        <el-col span="1" :offset="1">
                          <el-button size="small" type="text" icon="el-icon-edit"
                                     @click="startChangingSheetName"></el-button>
                        </el-col>
                        <el-col span="1" :offset="15">
                          <el-button size="small" type="primary" @click="saveBackTestReport">保存回测报告</el-button>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-header>
                  <el-main>
                    <el-card style="width: 95%; margin:0 auto; margin-top: 50px ">
                      <h3>收益率:{{ yield }}%</h3>
                      <div class="nowEcharts" id="nowEcharts">加载中...</div>
                    </el-card>
                  </el-main>
                </el-container>
              </div>
              <div v-if="elMainType==='回测报告列表'">
                <el-card style="width: 95%; margin:0 auto; margin-top: 50px; height:500px">
                  <h3>回测报告列表</h3>
                  <el-scrollbar>
                    <el-table
                      :data="reportList"
                      style="width: 100%">
                      <el-table-column prop="conditionSheetName" label="条件单"></el-table-column>
                      <el-table-column prop="stockName" label="股票"></el-table-column>
                      <el-table-column prop="startTime" label="开始时间"></el-table-column>
                      <el-table-column prop="endTime" label="结束时间"></el-table-column>
                      <el-table-column prop="yield" label="收益率"></el-table-column>
                      <el-table-column fixed="right" width="100">
                        <template #default="scope">
                          <el-button @click="showReport(scope.row)" type="text" size="small">查看详情</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-scrollbar>
                </el-card>
              </div>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" src="./conditionSheet.ts">
</script>

<style lang="scss">
.el-header {
  padding-inline-start: 0px;
  padding-inline-end: 0px;
}

.el-main {
  padding: 0px
}

.nowEcharts {
  width: 1000px;
  height: 500px;
  margin: 0 auto
}
</style>
